/**
 * 系统管理 菜单管理
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>菜单管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 主体内容 -->


      <div class="menu">
        <el-menu
          mode="vertical"
          background-color="#304156"
          text-color="#bfcbd9"
          active-text-color="#409EFF"
          :default-active="activeIndex"
          router
        >
          <NavMenu :navMenus="sret"></NavMenu>
        </el-menu>
        <router-view></router-view>
      </div>


  </div>
</template>

<script>
import {
  ModuleList,
  ModuleGet,
  ModuleNodes,
  ModuleSave,
  ModuleDelete
} from '../../api/userMG'
import NavMenu from "@/components/NavMenu"
export default {
  components: {
   NavMenu
  },
  data() {
    return {
      menuData:[],//后端json userId
      sret:[],//转换后的树状菜单
      activeIndex: 'aa',
      menuData: [
        {
          //一级
          entity: {
            id: 0,
            name: "aa",
            icon: "el-icon-message",
            alias: "一级菜单"
          }
        },
        {
          //一级
          entity: {
            id: 1,
            name: "systemManage",
            icon: "el-icon-message",
            alias: "两级菜单"
          },
          //二级
          childs: [
            {
              entity: {
                id: 3,
                name: "authManage",
                icon: "el-icon-loading",
                alias: "权限管理",
                value: { path: "/hello" }
              }
            },
            {
              entity: {
                id: 4,
                name: "roleManage",
                icon: "el-icon-bell",
                alias: "角色管理",
                value: "/system/role"
              }
            },
            {
              entity: {
                id: 2,
                name: "menuManage",
                icon: "el-icon-edit",
                alias: "菜单管理",
                value: "/system/menu"
              }
            },
            {
              entity: {
                id: 5,
                name: "groupManage",
                icon: "el-icon-mobile-phone\r\n",
                alias: "分组管理",
                value: "/system/group"
              }
            }
          ]
        },
        {
          //一级
          entity: {
            id: 6,
            name: "userManage",
            icon: "el-icon-news",
            alias: "三级菜单"
          },
          //二级
          childs: [
            {
              entity: {
                id: 7,
                name: "accountManage",
                icon: "el-icon-phone-outline\r\n",
                alias: "帐号管理",
                value: ""
              },
              //三级
              childs: [
                {
                  entity: {
                    id: 14,
                    name: "emailManage",
                    icon: "el-icon-sold-out\r\n",
                    alias: "邮箱管理",
                    value: "/content/email"
                  }
                },
                {
                  entity: {
                    id: 13,
                    name: "passManage",
                    icon: "el-icon-service\r\n",
                    alias: "密码管理",
                    value: "/content/pass"
                  }
                }
              ]
            },
            {
              entity: {
                id: 8,
                name: "integralManage",
                icon: "el-icon-picture",
                alias: "积分管理",

                value: "/user/integral"
              }
            }
          ]
        },
        {
          //一级
          entity: {
            id: 40,

            name: "contentManage",
            icon: "el-icon-rank",
            alias: "四级菜单"
          },
          //er级
          childs: [
            {
              entity: {
                id: 41,
                name: "classifyManage2",
                icon: "el-icon-printer",
                alias: "分类管理"
              },
              //三级
              childs: [
                {
                  entity: {
                    id: 42,
                    name: "classifyManage3",
                    icon: "el-icon-printer",
                    alias: "分类管理"
                  },
                  //四级
                  childs: [
                    {
                      entity: {
                        id: 43,
                        name: "classifyManage4",
                        icon: "el-icon-printer",
                        alias: "分类管理",
                        value: "/content/classify"
                      }
                    }
                  ]
                }
              ]
            }
          ]
        }
      ],
      leftMenus:[{
        "ModelId":1,
        "MenuID":0,
        "name": "中科慈航",
        "code": "ZKCH",
        "icon": "icon-th",
        "child": [{
          "ModelId":2,
          "MenuID":1,
          "name": "广州中科慈航",
          "icon": "icon-minus-sign",
          "code": "GZZKCH",
          "parentCode": "ZKCH",
          "child": [{
            "ModelId":3,
            "MenuID":2,
            "name": "广州中科慈航天河区分行",
            "code": "GZZKCHTQFH",
            "icon": "",
            "parentCode": "GZZKCH",
            "child": []
          }]
        },
          {
            "ModelId":6,
            "MenuID":0,
            "name": "北京中科慈航",
            "icon": "",
            "code": "BJZKCH",
            "parentCode": "ZKCH",
            "child": [{
              "ModelId":7,
              "MenuID":6,
              "name": "北京中科慈航中城区分行",
              "code": "BJZKCHZCFH",
              "icon": "",
              "parentCode": "BJZKCH",
              "child": []
            }]
          },
          {
            "ModelId":13,
            "MenuID":1,
            "name": "广州中科慈航天河区分行",
            "code": "GZZKCHTQFH",
            "icon": "",
            "parentCode": "GZZKCH",
            "child": []
          },{
            "ModelId":23,
            "MenuID":1,
            "name": "广州中科慈航天河区分行",
            "code": "GZZKCHTQFH",
            "icon": "",
            "parentCode": "GZZKCH",
            "child": []
          },{
            "ModelId":33,
            "MenuID":1,
            "name": "广州中科慈航天河区分行",
            "code": "GZZKCHTQFH",
            "icon": "",
            "parentCode": "GZZKCH",
            "child": []
          },{
            "ModelId":43,
            "MenuID":1,
            "name": "广州中科慈航天河区分行",
            "code": "GZZKCHTQFH",
            "icon": "",
            "parentCode": "GZZKCH",
            "child": []
          }




        ]
      },
        {
          "ModelId":9,
          "MenuID":0,
          "name": "中科科技",
          "code": "ZKKJ",
          "icon": "icon-th",
          "child": [{
            "ModelId":10,
            "MenuID":9,
            "name": "广州中科科技",
            "code": "GZZKKJ",
            "icon": "icon-minus-sign",
            "parentCode": "ZKKJ",
            "child": [{
              "ModelId":11,
              "MenuID":9,
              "name": "广州天河中科科技",
              "code": "GZTHZKKJ",
              "icon": "",
              "parentCode": "GZZKKJ",
              "child": []
            }]
          }]
        },
        {
          "ModelId":13,
          "MenuID":0,
          "name": "达到科技3",
          "code": "ZKKJ",
          "icon": "icon-th",
          "child": [{
            "ModelId":14,
            "MenuID":13,
            "name": "广州中科科技",
            "code": "GZZKKJ",
            "icon": "icon-minus-sign",
            "parentCode": "ZKKJ",
            "child": [{
              "ModelId":15,
              "MenuID":14,
              "name": "广州天河中科科技",
              "code": "GZTHZKKJ",
              "icon": "",
              "parentCode": "GZZKKJ",
              "child": []
            }]
          }]
        }],

      showdelete: false,
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },

      // rules表单验证
      rules: {
        parentId: [
          { required: true, message: '请选择父级菜单', trigger: 'blur' }
        ],
        moduleName: [
          { required: true, message: '请输入菜单名称', trigger: 'blur' }
        ],
        moduleIcon: [
          { required: true, message: '请输入菜单图标', trigger: 'blur' }
        ],
        moduleUrl: [{ required: true, message: '请输入URL', trigger: 'blur' }],
        moduleOrder: [
          { required: true, message: '请输入菜单顺序', trigger: 'blur' }
        ]
      },
      fmenu: []
    }
  },
  /**
   * 创建完毕
   */

  created() {
    // this.getdata()
    //  this.getmenu()
   this.fetchData()//后台拿的json
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {

    format(jsonData) {
      var result = [], temp = {}, i = 0, j = 0, len = jsonData.length
      for (; i < len; i++) {
        temp[jsonData[i]['menuId']] = jsonData[i] // 以id作为索引存储元素，可以无需遍历直接定位元素
      }
      for (; j < len; j++) {
        var currentElement = jsonData[j]
        var tempCurrentElementParent = temp[currentElement['parentId']] // 临时变量里面的当前元素的父元素
        if (tempCurrentElementParent) { // 如果存在父元素
          if (!tempCurrentElementParent['children']) { // 如果父元素没有chindren键
            tempCurrentElementParent['children'] = [] // 设上父元素的children键
          }
          tempCurrentElementParent['children'].push(currentElement) // 给父元素加上当前元素作为子元素
        } else { // 不存在父元素，意味着当前元素是一级元素
          result.push(currentElement);
        }
      }
      this.sret=result; //重新赋值
      return result;
    },

    //全部显示
    fetchData (){
      this.$axios.get(`/api/menu/queryAllList`,this.searchMap).then(response => {
        this.menuData = response.data.list;
        this.format(this.menuData);
        //console.log(this.sret)
      });
    },




    // 获取数据
    getdata() {
      ModuleList()
        .then(res => {
          this.treeData = [
            {
              id: 1,
              pId: 0,
              name: '平台顶级',
              open: true,
              checked: false
            },
            {
              id: 2,
              pId: 1,
              name: '一层',
              open: true,
              checked: false
            },
            {
              id: 3,
              pId: 1,
              name: '一层',
              open: true,
              checked: false
            },
            {
              id: 12,
              pId: 1,
              name: '一层',
              open: true,
              checked: false
            },
            {
              id: 13,
              pId: 1,
              name: '一层',
              open: true,
              checked: false
            },
            {
              id: 17,
              pId: 1,
              name: '一层',
              open: true,
              checked: false
            },
            {
              id: 4,
              pId: 2,
              name: '一层',
              open: true,
              checked: false
            },
            {
              id: 5,
              pId: 2,
              name: '一层',
              open: true,
              checked: false
            },
            {
              id: 6,
              pId: 2,
              name: '一层',
              open: true,
              checked: false
            },
            {
              id: 7,
              pId: 2,
              name: '一层',
              open: true,
              checked: false
            }
          ]
        })
        .catch(err => {
          this.loading = false
          this.$message.error('菜单管理列表失败，请稍后再试！')
        })
    },
    // 添加
    addModule() {
      this.showdelete = false
      this.form.addUser = ''
      this.form.editUser = ''
      this.form.addTime = ''
      this.form.editTime = ''
      this.form.moduleId = ''
      this.form.parentId = ''
      this.form.moduleLevel = ''
      this.form.systemNo = ''
      this.form.isLeaf = ''
      this.form.fullIndex = ''
      this.form.moduleIcon = ''
      this.form.moduleOrder = ''
      this.form.moduleName = ''
      this.form.moduleNotes = ''
      this.form.moduleUrl = ''
    },
    // 获取父级菜单
    getmenu() {
    // console.log(this.leftMenus)
    },
    // 复选变单选
    handleClick(data, checked, node) {
      if (checked) {
        this.$refs.tree.setCheckedNodes([])
        this.$refs.tree.setCheckedNodes([data])
        this.showdelete = true
      } else {
      }
    },
    // 点击节点
    nodeclick(arr, node, self) {
      ModuleGet(arr.id)
        .then(res => {
         // JSON.stringify(res))
          this.form = res.data.data
          this.$refs.tree.setCheckedNodes([])
          this.$refs.tree.setCheckedNodes([arr])
        })
        .catch(err => {
          this.loading = false
          this.$message.error('用户管理获取失败，请稍后再试！')
        })
    },
    // 保存菜单
    saveModule(editData) {
      this.$refs[editData].validate(valid => {
        if (valid) {
          ModuleSave(this.form)
            .then(res => {
              this.getdata()
              this.getmenu()
            })
            .catch(err => {
              this.$message.error('菜单管理列表保存失败，请稍后再试！')
            })
        } else {
          return false
        }
      })
    },
    // 删除菜单
    deleteModule() {
      ModuleDelete(this.form.moduleId)
        .then(res => {
          this.getdata()
          this.getmenu()
          this.$message.error('菜单管理列表删除成功！')
        })
        .catch(err => {
          this.$message.error('菜单管理列表删除失败，请稍后再试！')
        })
    }
  }
}
</script>

<style>
.user-search {
  margin-top: 20px !important;
}
.user-search td {
  margin-top: 20px !important;
}
.userRole {
  width: 100%;
}
.el-table__expanded-cell {
  padding: 0px !important;
  margin: 0px !important;
}
.modt-box {
  width: 100%;
  height: 60px;
  line-height: 60px;
  background-color: #f0f2f5;
  text-align: center;
  color: #334157;
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 24px;
}
.mod-btnbox {
  margin-bottom: 20px;
}
.treeclass {
  border: 1px solid #f3f3f3;
  padding-top: 20px;
  padding-bottom: 20px;
}
.selectw {
  width: 100%;
}
  .navMenu{
    background-color: red;
  }
  .menu{
    width: 300px;
    margin-top: 10px;
  }
</style>

